<template>
  <div class="open_card">
    <header>
       <p @click='home'><img src="../assets/img/left@2x.png"></p>
       <p>{{title}}</p>
       <p></p>
    </header>
    <div class="forms">
        <form>
          <ul>
            <li>
              <span class="name">车主姓名</span>
              <span class="inputer"><input type="text" placeholder="请输入车主姓名"></span>
            </li>
            <li>
              <span class="name">联系方式</span>
              <span class="inputer"><input type="text" placeholder="请输入联系方式"></span>
            </li>
          </ul>
          <div class="upload">
            <p>身份证</p>
            <p><img src="../assets/img/sc_tb@2x.png" /></p>
            <p>点击上传身份证复印件</p>
          </div>
        </form>
        <div class="prompter">
          <h1>提示</h1>
          <p>你的加油卡办理请审核通过后，我们会尽快为您有机加油卡，请填写您的邮寄地址</p>
          <span class="queding">确定</span>
        </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'open_card',
  data () {
    return {
      title: '开通加油卡'
    }
  },
  methods:{
    home:function(){
        this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '../assets/less/style.less';
.open_card {
  height: 100%;
  background: #f7f7f7;
  header {
     .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
    }
  .forms {
     /* width: 100%; */
    form{
      .margin-left(24);
      .margin-right(24);
      ul {
        li {
          .line-height(94);
          .border-bottom(1,solid,#c9c9c9);
          input {
            .padding-left(30);
            background: #f7f7f7;
            border: none;
          }
        }
      }
      .upload {
        .px2rem(height,50);
        display: flex;
        align-items: center;
        /* .border(1,solid,#000); */
        .font(24,#333);
        .margin-top(70);
        p:nth-child(2){
          .margin-left(56);
          img {
            .px2rem(height,48);
            .px2rem(width,48);
          }
        }
        p:nth-child(3){
          .margin-left(16);
        }
      }
    }
  }
  .prompter {
    width: 72%;
    background: #e6e6e6;
    position: fixed;
    top: 23%;
    left: 50%;
    margin-left: -36%;
    .border-radius(25);
    h1 {
      text-align: center;
      .margin-top(42);
      .font(34,#333);
    }
    p{
      width: 90%;
      text-align: center;
      margin: auto;
      .margin-top(20);
      .line-height(36);
      .font(20,#1f1f1f);
      .padding-bottom(20);
    }
    span {
      display: block;
      .line-height(86);
      text-align: center;
      .border-top(1,solid,#c7c7c7);
    }
  }
}

</style>

